import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Select, DatePicker, Space, Statistic, Progress } from 'antd';
import { 
  LineChartOutlined, 
  BarChartOutlined, 
  PieChartOutlined,
  TrendingUpOutlined 
} from '@ant-design/icons';
import MainLayout from '../components/Layout/MainLayout';

const { RangePicker } = DatePicker;
const { Option } = Select;

const AnalyticsPage: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [mounted, setMounted] = useState(false);
  const [timeRange, setTimeRange] = useState('week');

  useEffect(() => {
    setMounted(true);
    loadAnalyticsData();
  }, []);

  const loadAnalyticsData = async () => {
    setLoading(true);
    try {
      await new Promise(resolve => setTimeout(resolve, 1000));
    } finally {
      setLoading(false);
    }
  };

  if (!mounted) {
    return (
      <div style={{ padding: 20 }}>
        <div>加载中...</div>
      </div>
    );
  }

  return (
    <MainLayout>
      <div>
        {/* 筛选器 */}
        <Card style={{ marginBottom: 24 }}>
          <Space>
            <span>时间范围：</span>
            <Select value={timeRange} onChange={setTimeRange} style={{ width: 120 }}>
              <Option value="day">今日</Option>
              <Option value="week">本周</Option>
              <Option value="month">本月</Option>
              <Option value="year">本年</Option>
            </Select>
            <RangePicker />
          </Space>
        </Card>

        {/* 关键指标 */}
        <Row gutter={16} style={{ marginBottom: 24 }}>
          <Col span={6}>
            <Card>
              <Statistic
                title="总能耗"
                value={1250.5}
                suffix="kWh"
                prefix={<LineChartOutlined />}
                valueStyle={{ color: '#1890ff' }}
              />
              <div style={{ marginTop: 8 }}>
                <span style={{ fontSize: 12, color: '#52c41a' }}>↗ 5.2% 较上周</span>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="设备在线率"
                value={92.3}
                suffix="%"
                prefix={<BarChartOutlined />}
                valueStyle={{ color: '#52c41a' }}
              />
              <Progress percent={92.3} showInfo={false} strokeColor="#52c41a" />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="空间利用率"
                value={78.5}
                suffix="%"
                prefix={<PieChartOutlined />}
                valueStyle={{ color: '#faad14' }}
              />
              <Progress percent={78.5} showInfo={false} strokeColor="#faad14" />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="成本节约"
                value={15.8}
                suffix="%"
                prefix={<TrendingUpOutlined />}
                valueStyle={{ color: '#52c41a' }}
              />
              <div style={{ marginTop: 8 }}>
                <span style={{ fontSize: 12, color: '#52c41a' }}>节约 ¥12,450</span>
              </div>
            </Card>
          </Col>
        </Row>

        {/* 图表区域 */}
        <Row gutter={16}>
          <Col span={12}>
            <Card title="能耗趋势" loading={loading}>
              <div style={{ height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fafafa' }}>
                <div style={{ textAlign: 'center', color: '#999' }}>
                  <LineChartOutlined style={{ fontSize: 48, marginBottom: 16 }} />
                  <div>能耗趋势图表</div>
                  <div style={{ fontSize: 12 }}>集成图表库后显示</div>
                </div>
              </div>
            </Card>
          </Col>
          <Col span={12}>
            <Card title="设备状态分布" loading={loading}>
              <div style={{ height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fafafa' }}>
                <div style={{ textAlign: 'center', color: '#999' }}>
                  <PieChartOutlined style={{ fontSize: 48, marginBottom: 16 }} />
                  <div>设备状态饼图</div>
                  <div style={{ fontSize: 12 }}>集成图表库后显示</div>
                </div>
              </div>
            </Card>
          </Col>
        </Row>

        <Row gutter={16} style={{ marginTop: 16 }}>
          <Col span={24}>
            <Card title="人员流动热力图" loading={loading}>
              <div style={{ height: 400, display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fafafa' }}>
                <div style={{ textAlign: 'center', color: '#999' }}>
                  <BarChartOutlined style={{ fontSize: 48, marginBottom: 16 }} />
                  <div>人员流动热力图</div>
                  <div style={{ fontSize: 12 }}>显示园区各区域人员密度和流动情况</div>
                </div>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </MainLayout>
  );
};

export default AnalyticsPage;
